<template>
  <div class="components-container">
    <el-card class="">
      <div slot="header" class="clearfix">
        <span>常用信息</span>
      </div>
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="100px"
        :disabled="detail"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名:" prop="xm">
              <el-input v-model="form.xm" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="性别:" prop="xb">
              <el-select v-model="form.xb" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄:" prop="nl">
              <el-input-number
                v-model="form.nl"
                :min="0"
                :max="999"
                label="年龄"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:">
              <el-date-picker
                v-model="form.csrq"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                @change="setnl"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="患者编号：" prop="bqh">
              <el-input
                v-model="form.bqh"
                placeholder="请输入格式为：250317001的编号"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- <el-col :span="6">
          <el-form-item label="检查部位">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
          <el-col :span="6">
            <el-form-item label="检查日期:">
              <el-date-picker
                v-model="form.sjrq"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="初/复诊:">
              <el-select v-model="form.cfz" placeholder="请选择初/复诊">
                <el-option label="初诊" value="初诊" />
                <el-option label="复诊" value="复诊" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="门诊号:">
              <el-input v-model="form.mzh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住院号:">
              <el-input v-model="form.zyh" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="床位号:">
              <el-input v-model="form.cwh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="病历号:">
              <el-input v-model="form.blh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仪器型号">
              <el-input v-model="form.yqxh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="检查医生:">
              <el-input v-model="form.jcys" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医技号:">
              <el-input v-model="form.yjh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核医生:">
              <el-input v-model="form.shys" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="送检科室:">
              <el-input v-model="form.sjks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送检医生:">
              <el-input v-model="form.sjys" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录医生:">
              <el-input v-model="form.jlys" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="检查类型:">
              <el-input v-model="form.jclx" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收费类型:">
              <el-input v-model="form.sflx" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检查收费:">
              <el-input v-model="form.jcsf" style="width: 95%" />元
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="病史:">
              <el-input
                v-model="form.bs"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <el-card class="">
      <div slot="header" class="clearfix">
        <span>附属信息</span>
      </div>
      <el-form
        ref="ruleFormA"
        :model="form"
        :rules="rules"
        label-width="80px"
        :disabled="detail"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="主诉:">
              <el-input
                v-model="form.zs"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="民族:">
              <el-input v-model="form.mz" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婚姻:">
              <el-input v-model="form.hy" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="子女数:">
              <el-input v-model="form.zns" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生育证号:">
              <el-input v-model="form.syzh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="身高:">
              <el-input v-model="form.sg" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重:">
              <el-input v-model="form.tz" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体表面积:">
              <el-input v-model="form.tbmj" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="电话:">
              <el-input v-model="form.dh" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证:">
              <el-input v-model="form.sfz" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="劳保号:">
              <el-input v-model="form.lbh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职业:">
              <el-input v-model="form.zy" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位:">
              <el-input v-model="form.dw" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="居住地址:">
              <el-input v-model="form.jzdz" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户籍地址:">
              <el-input v-model="form.hjdz" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button v-if="!detail" type="primary" @click="onSubmit"
        >保存</el-button
      >
      <el-button @click="goBack">取消</el-button>
    </el-card>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  // name: "addCustom",
  components: {},
  data() {
    return {
      detail: false,
      rules: {
        xm: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        xb: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        nl: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        bqh: [{ required: true, message: '请输入患者编号', trigger: 'blur' }],
      },
      form: {
        id: '',
        xm: '',
        xb: '',
        nl: '',
        csrq: '',
        sjrq: new Date(),
        cfz: '',
        mzh: '',
        zyh: '',
        bqh: '',
        cwh: '',
        blh: '',
        yqxh: '',
        jcys: '',
        yjh: '',
        shys: '',
        sjks: '',
        sjys: '',
        jlys: '',
        jclx: '',
        sflx: '',
        jcsf: '',
        bs: '',
        zs: '',
        mz: '',
        hy: '',
        zns: '',
        syzh: '',
        sg: '',
        tz: '',
        tbmj: '',
        dh: '',
        sfz: '',
        lbh: '',
        zy: '',
        dw: '',
        jzdz: '',
        hjdz: '',
      },
    };
  },
  created() {
    // var path = this.traverseTree(this.$store.getters.permission_routes, this.$route.path)
    const currentView =
      this.$store.getters.permission_routes[
        this.$store.getters.permission_routes.findIndex(
          (item) => item.path === this.$route.path
        )
      ];
    this.$store.getters.permission_routes.forEach((a) => {
      this.traverseTree(a, this.$route.path);
    });
    // localStorage.removeItem("customer");
    var id = this.$route.query.id;
    if (id) {
      if (this.$route.query.flag == 'detail') {
        this.detail = true;
      }
      var data = eval(localStorage.getItem('customer'));
      var customer = data.find((v) => {
        return v.id == id;
      });
      if (customer) {
        this.form = customer;
      }
    }
  },
  methods: {
    traverseTree(node, goal) {
      if (node.children) {
        node.children.forEach((child) => {
          if (child.path == goal) {
            if (this.$route.query.id) {
              child.meta.title = '编辑病人';
            }
            return child;
          } else {
            this.traverseTree(child, goal); // 递归调用处理子节点
          }
        });
      }
    },

    goBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            // 新增
            // this.$store.commit("addView", 123);
            this.form.id = uuidv4().replace(/-/g, '');
            debugger;
            // this.$store.dispatch("customer/addVisitedView", this.form);
            var a = JSON.parse(localStorage.getItem('customer'));
            if (a) {
              a.push(this.form);
            } else {
              a = [];
              a.push(this.form);
            }
            localStorage.setItem('customer', JSON.stringify(a));
          } else {
            // 编辑
            var a = JSON.parse(localStorage.getItem('customer'));
            if (a) {
              var customer = a.map((v) => {
                if (v.id == this.form.id) {
                  v = this.form;
                }
                return v;
              });
            } else {
              a = [];
              a.push(this.form);
            }
            localStorage.setItem('customer', JSON.stringify(customer));
          }
          this.$message.success('保存成功！');
          this.$router.go(-1);
        }
      });
    },
    setnl() {
      const today = new Date();
      const birthDate = new Date(this.form.csrq);
      let age = today.getFullYear() - birthDate.getFullYear();
      const m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      this.form.nl = age;
    },
  },
};
</script>
